<template>
  <div class="accident-vaccines">
    <header>
      <div class="insurance-name">监护人责任险(个客专用)</div>
      <div class="insurance-price">¥30</div>
    </header>
    <div class="column-title">
      <strong>投保人信息</strong>
    </div>
    <van-form>
      <van-cell-group>
        <van-field
          v-model="form.name"
          name="姓名"
          label="家长姓名"
          placeholder="请录入家长姓名"
          required
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '请录入家长姓名' }]"
        />
        <van-field
          v-model="form.cardType"
          is-link
          readonly
          name="证件类型"
          label="证件类型"
          required
          input-align="right"
          error-message-align="right"
          placeholder="请选择证件类型"
          @click="showPicker1 = true"
        />
        <van-field
          v-model="form.cardNo"
          name="证件号码"
          label="证件号码"
          placeholder="请录入证件号码"
          required
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '请录入证件号码' }]"
        />
        <van-field
          v-model="form.mobile"
          name="手机号"
          label="手机号"
          placeholder="请录入手机号"
          required
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '请录入手机号' }]"
        />
        <van-field
          v-model="form.email"
          name="电子邮箱"
          label="电子邮箱"
          placeholder="请录入电子邮箱"
          input-align="right"
          error-message-align="right"
        />
      </van-cell-group>
    </van-form>
    <div class="column-title">
      <strong>被保人信息</strong>
    </div>
    <van-form>
      <van-cell-group>
        <van-field
          v-model="form.name2"
          name="姓名"
          label="学生姓名"
          placeholder="请录入学生姓名"
          required
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '请录入学生姓名' }]"
        />
        <van-field
          v-model="form.cardType2"
          is-link
          readonly
          name="证件类型"
          label="证件类型"
          required
          input-align="right"
          error-message-align="right"
          placeholder="请选择证件类型"
          @click="showPicker1 = true"
        />
        <van-field
          v-model="form.cardNo2"
          name="证件号码"
          label="证件号码"
          placeholder="请录入证件号码"
          required
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '请录入证件号码' }]"
        />
        <van-field
          v-model="form.mobile2"
          name="手机号"
          label="手机号"
          placeholder="请录入手机号"
          required
          input-align="right"
          error-message-align="right"
          :rules="[{ required: true, message: '请录入手机号' }]"
        />
        <van-field
          v-model="form.schoolName"
          name="学校名称"
          label="学校名称"
          placeholder="请录入学校名称"
          input-align="right"
          error-message-align="right"
          required
          :rules="[{ required: true, message: '请录入学校名称' }]"
        />
        <van-field
            v-model="form.name"
            name="保险期限"
            label="保险期限"
            disabled
        />
        <van-field
            v-model="form.startTime"
            name="开始日期"
            label="开始日期"
            is-link
            readonly
            @click="showPicker4 = true"
        >
          <template #extra>
            <span>0时起</span>
          </template>
        </van-field>
        <van-field
            v-model="form.endTime"
            name="结束日期"
            label="结束日期"
            disabled
        >
          <template #extra>
            <span>24时止</span>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>

    <div class="column-title">
      <strong>销售人员信息</strong>
    </div>
    <van-cell-group>
      <van-cell
        title="机构名称"
        value="中国太平洋财产保险股份有限公司"
        value-class="flex-2"
      />
      <van-cell
        title="执业证编号"
        value="01000433010080002018005993"
        value-class="flex-2"
      />
      <van-cell title="经办人姓名" value="陈佳" value-class="flex-2" />
    </van-cell-group>
    <van-field name="checkbox" class="clause">
      <template #input>
        <van-checkbox v-model="agree" shape="square">
          我已阅读
          <a href="#">投保须知</a>、 <a href="#">保险条款</a>、
          <a href="#">理赔指引</a>、 <a href="#">免责告知</a>、并通知所述内容
        </van-checkbox>
      </template>
    </van-field>
    <footer>
      <div>
        <div class="back-btn">返回</div>
        <div class="price">¥30.00</div>
      </div>
      <div>
        <div class="buy-btn">立即购买</div>
      </div>
    </footer>
    <!--证件类型-->
    <van-popup v-model:show="showPicker1" position="bottom">
      <van-picker
        :columns="columns1"
        @cancel="showPicker1 = false"
        v-model="form.cardType"
        @confirm="confirm1"
      />
    </van-popup>
    <!--证件类型-->
    <van-popup v-model:show="showPicker2" position="bottom">
      <van-picker
        :columns="columns2"
        @cancel="showPicker2 = false"
        v-model="form.cardType2"
        @confirm="confirm2"
      />
    </van-popup>
    <!--日期选择-->
    <van-popup v-model:show="showPicker4" position="bottom">
      <van-datetime-picker
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPicker4 = false"
          @confirm="confirm4"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      check: 1,
      check2: 1,
      agree: false,
      checked: false,
      columns1: ["身份证"],
      showPicker1: false,
      columns2: ["身份证"],
      showPicker2: false,
      showPicker4: false,
      minDate: new Date(new Date().getFullYear()+0,new Date().getMonth(),new Date().getDate()+0),
      maxDate: new Date(new Date().getFullYear()+0,11,31),
      form: {
        name: "",
        name2: "",
        cardType: "身份证",
        cardType2: "身份证",
        cardNo: "",
        cardNo2: "",
        mobile: "",
        mobile2: "",
        email: "",
        schoolName: "",
        licensePlateColor: "蓝",
        seatNum: "",
        carId: "",
        carNature: "私家车",
        FrameId: "",
        addr: "",
        carDealerId: "",
        startTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    formatter (type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      return val;
    },
    confirm1(value) {
      this.form.cardType = value;
      this.showPicker1 = false;
    },
    confirm2(value) {
      this.form.cardType2 = value;
      this.showPicker2 = false;
    },
    confirm4(value) {
      this.form.startTime = new Date(parseInt(new Date(value).getTime())).toLocaleString().substring(0,10);
      this.form.endTime = new Date(parseInt(new Date(value).getTime()+86400000*365)).toLocaleString().substring(0,10);
      this.showPicker4 = false
    },
  },
  mounted() {
    console.log(
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDay()
    );
  },
};
</script>

<style lang="less" scoped>
.accident-vaccines {
  padding-bottom: 65px;
  header {
    background: url("../../../assets/img/accident/header.png") left center
      no-repeat;
    background-size: cover;
    padding: 15px;
    .insurance-name {
      font-size: 20px;
    }
    .insurance-price {
      font-size: 18px;
      color: #f5a100;
    }
  }
  .column-title {
    padding: 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    strong {
      font-weight: 600;
      border-left: 3px solid #005bac;
      padding-left: 10px;
    }
  }
  .deadline {
    padding: 12px 16px;
    background: #fff;
    font-size: 16px;
    .main {
      .start,
      .end {
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          position: relative;
          left: -35px;
        }

        .icon {
          border-radius: 50%;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          background: #005bac;
        }
      }
      .end {
          .time{
              left:-30px;
          }
        .icon {
          background: #009ddc;
        }
      }
    }
  }
  .clause {
    margin-top: 30px;
    a {
      color: #005bac;
    }
  }
  footer {
    width: 100vw;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 65px;
    line-height: 65px;
    & > div {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .back-btn {
      background-color: rgb(213, 235, 255);
      text-align: center;
      font-size: 20px;
      flex: 2 2 0;
      height: 65px;
    }
    .price {
      font-size: 20px;
      color: #f5a100;
      flex: 3 3 0;
      height: 65px;
      text-align: center;
      background-color: #ffffff;
    }
    .buy-btn {
      flex: 1;
      font-size: 20px;
      text-align: center;
      background-color: #f5f5f5;
      color: rgba(0, 0, 0, 0.25);
      height: 65px;
    }
  }
  /deep/.flex-2 {
    flex: 2 !important;
  }
}
</style>
